<!-- 订单详情 -->
<template>
  <div class="detail" v-loading="listLoading">
    <div>
      <span class="titles">商品信息</span>
      <div class="list">
        <span class="list-text">商品名称：{{ find.shopName }}</span>
        <span class="list-text">商品介绍：{{ find.shopLabel }}</span>
        <span class="list-text">商品价格：{{ find.shopPrice }}元</span>
        <span class="list-text">商品一级分类：{{ find.primaryClassName }}</span>
        <span class="list-text">商品二级分类：{{ find.secondaryClassName }}</span>
      </div>
      <div class="list2">
        <span class="list2-text">商品主图</span>
        <div class="list2-img">
          <img class="img" :src="find.shopImg" />
        </div>
      </div>
      <div class="list2">
        <span class="list2-text">商品轮播图</span>
        <div class="list3-img">
          <div class="img" v-for="(item,index) in find.carouseImg" :key="index">
              <el-image style="width: 100px; height: 100px" :src="item" :preview-src-list="find.carouseImg" :initial-index="index"></el-image>
          </div>
        </div>
      </div>
      <div class="list2">
        <span class="list2-text">商品介绍图</span>
        <div class="list3-img">
          <div class="img" v-for="(item,index) in find.introduceImg" :key="index">
              <el-image style="width: 100px; height: 100px" :src="item" :preview-src-list="find.introduceImg" :initial-index="index"></el-image>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
  
  <script>
import { getGoodsFind } from "@/api/goods";
export default {
  data() {
    return {
      goods_id: "", //商品id
      find: "",
      listLoading: false,
    };
  },
  created() {
    this.goods_id = this.$route.query.goods_id;
    this.getGoodsFind();
  },
  methods: {
    getGoodsFind() {
      //获取商品列表
      this.listLoading = true;
      getGoodsFind({ goods_id: this.goods_id })
        .then((res) => {
          this.find = res.data;
          this.find.carouseImg = this.find.carouseImg.split(",");
          this.find.introduceImg = this.find.introduceImg.split(",");
          this.listLoading = false;
        })
        .catch((err) => {
          this.listLoading = false;
        });
    },
  },
};
</script>
  
  <style scoped lang="scss">
.detail {
  .titles {
    display: block;
    font-size: 16px;
    font-weight: bold;
    color: #333333;
    padding: 0px 20px;
  }

  .list {
    padding: 20px;
    padding-left: 80px;

    .list-text {
      display: block;
      font-size: 16px;
      font-weight: 400;
      color: #333333;
      line-height: 40px;
    }
  }

  .list2 {
    padding: 20px;
    padding-left: 80px;

    .list2-text {
      display: block;
      font-size: 16px;
      font-weight: 400;
      color: #333333;
      line-height: 40px;
    }

    .list2-img {
      width: 200px;
      height: 200px;

      .img {
        width: 200px;
        height: 200px;
        display: block;
        border: 1px solid #666666;
      }
    }

    .list3-img {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;

      .img {
        width: 100px;
        height: 100px;
        margin-right: 10px;
      }
    }
  }
}
</style>